<template>
	<view class="mian">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<Header title="闯关记录"></Header>
		<view class="list">
			<scroll-view lower-threshold="50" @scrolltolower="scrolltolower" style="height: 100%" scroll-y="true">
				<view class="list_son" v-for="(item,index) in list" :key="index">
					<view class="top_son">
						{{item.win==1?`闯关第${item.level}层成功`:`闯关第${item.level}层失败`}}<text>{{item.win!=1?'（战力不足）':' '}}</text>
					</view>
					<view class="bot_son">
						{{item.created_at}}
					</view>
				</view>
				<view v-if="list.length==0" class="zanwu">
					<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" class="zaneu_img" mode="widthFix">
					</image>
					<view class="">
						没有数据哦~
					</view>
				</view>
				<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '没有更多了',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				page: 1,
				max_page: 1,
			}
		},
		onShow() {
			this.initList();
		},
		methods: {
			// 刷新下一页
			scrolltolower() {
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.initList();
					setTimeout(() => {
						if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},
			// 初始化数据
			async initList() {
				let res = await this.$http.index.towerLogs({
					page: this.page
				})
				this.list = [...this.list, ...res.data];
				this.max_page = res.page;
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.zanwu {
		font-size: 14px;
		color: #A1A1A1;
		font-weight: 500;
		// margin-top: 20%;
		text-align: center;

		.zaneu_img {
			width: 70%;

		}
	}

	.mian {
		width: 100%;
		height: 100vh;
		background: linear-gradient(90deg, #E5FCFA 0%, #FAE1F4 100%);
	}

	.list {
		height: 90%;
		width: 100%;
		padding: 20px;
		overflow-y: auto;

		.list_son {
			width: 100%;
			padding: 10px;
			background: #FFFFFF;
			border-radius: 6px;
			margin-bottom: 10px;

			.top_son {
				font-size: 15px;
				font-weight: 600;
				color: #131314;
			}

			.bot_son {
				font-size: 11px;
				font-weight: 500;
				color: #696969;
				margin-top: 5px;
			}
		}
	}
</style>